<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册 | 音乐播放器</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.1.1.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background: url('/images/myImg.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e0e0e0;
        }

        .register-box {
            width: 100%;
            max-width: 420px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            transition: all 0.3s ease;
        }

        .register-box h3 {
            text-align: center;
            margin-bottom: 30px;
            background: linear-gradient(90deg, #8a79ff, #a57aff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
            font-size: 26px;
        }

        .form-control {
            background-color: rgba(255, 255, 255, 0.07);
            border: none;
            color: #fff;
            border-radius: 8px;
        }

        .btn-register {
            width: 100%;
            height: 45px;
            margin-top: 25px;
            background: linear-gradient(135deg, #6a5acd, #8e7dff);
            border: none;
            color: #fff;
            font-weight: bold;
            border-radius: 10px;
            transition: 0.3s ease;
        }

        .btn-register:hover {
            background: linear-gradient(135deg, #9b87ff, #bfa7ff);
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(138, 115, 255, 0.4);
        }

        .alert {
            margin-top: 20px;
            display: none;
            background-color: rgba(255, 0, 0, 0.1);
            border: 1px solid #ff4d4d;
            color: #ffcccc;
            border-radius: 6px;
        }

        .close {
            color: #fff;
            opacity: 0.8;
        }
    </style>
</head>
<body>
<div class="register-box">
    <h3>🎧 音乐服务器注册</h3>

    <div class="form-group">
        <label for="regUser">👤 用户名</label>
        <input type="text" class="form-control" id="regUser" placeholder="请输入用户名" />
    </div>

    <div class="form-group">
        <label for="regEmail">📧 邮箱</label>
        <input type="email" class="form-control" id="regEmail" placeholder="请输入邮箱" />
    </div>

    <div class="form-group">
        <label for="regPassword">🔒 密码</label>
        <input type="password" class="form-control" id="regPassword" placeholder="请输入密码" />
    </div>

    <button id="registerBtn" class="btn btn-register">🎵 注册</button>

    <div class="alert alert-danger" id="regMessageBox">
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
        <strong id="regMessage">请完善注册信息！</strong>
    </div>

    <div class="text-center mt-3">
        <a href="login.html" class="btn btn-link text-decoration-none" style="color: #8a79ff;">已有账号？立即登录</a>
    </div>
</div>

<script>
    $(function () {
        $("#registerBtn").click(function () {
            var username = $("#regUser").val().trim();
            var email = $("#regEmail").val().trim();
            var password = $("#regPassword").val().trim();

            if (username === "" || email === "" || password === "") {
                $("#regMessage").text("请完善注册信息！");
                $("#regMessageBox").fadeIn();
                return;
            }

            $.ajax({
                url: "/user/register",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    username: username,
                    password: password,
                    email: email
                }),
                success: function (result) {
                    if (result.status === 0) {
                        alert("注册成功！");
                        window.location.href = "login.html";
                    } else {
                        $("#regMessage").text(result.message);
                        $("#regMessageBox").fadeIn();
                    }
                },
                error: function () {
                    $("#regMessage").text("服务器连接失败，请稍后重试！");
                    $("#regMessageBox").fadeIn();
                }
            });
        });
    });
</script>
</body>
</html>
